iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
0
Modern Web

JavaScript 菜鳥研究室系列 第 25

菜鳥日記Day 25-ES6系列:this與作用域

  • 分享至 

  • xImage
  •  

在參考前輩撰寫的程式碼時,有時會看到箭頭函式的用法(包含forEach預設值的箭頭函式),我先在使用時大都草草帶過,沒有深入研究此議題。直到後來我發現有些人,在函式裡撰寫this,我的腦袋才開始慢慢浮現 咦! 這個this是指向哪裡啊?

在經過漫長的瞭解後,我逐漸發現原來this與作用域是有關連性的。
以下列程式碼為例,我想知道三個物件的this分別指向哪裡?
https://ithelp.ithome.com.tw/upload/images/20201009/20130039pVd5kDetMg.png

  1. 一開始先在window作用域宣告變數name,並賦予其名稱'臺灣'。
  2. 在window作用域宣告變數KH為1個陣列,且當中有4個物件。
  3. 第1個物件name為高雄,沒有辦法透過KH.name的方式呼叫,因為它不是函式。
  4. 第2個物件callName1為匿名函式,因console.log(1,2)都寫在function作用域裡,所以this.name會指向作用域的陣列名稱高雄。
  5. 第3個物件callName2為縮寫版的的匿名函式,雖然沒有把function寫出來,卻具有function的作用域,所以this.name一樣會指向作用域的陣列名稱高雄。
  6. 第4個物件callName3為ES6版本的箭頭函式,因cosole.log(5,6),並非寫在function的作用域裡,所以this.name會指向window作用域的名稱臺灣。

https://ithelp.ithome.com.tw/upload/images/20201009/20130039hlLv79OKyP.png
備註:沒有參數(parameter)時,箭頭函式前一定要有括號,有參數時,則不須有括號。


上一篇
菜鳥日記Day 24-ES6系列:var、let、const的區別與hoisting
下一篇
菜鳥日記Day 26-Promise承諾
系列文
JavaScript 菜鳥研究室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言